<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
    <el-table
      :data="dataList1"
      border
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%;">
      <el-table-column
        prop="name"
        header-align="left"
        align="left"
        width="200"
        :show-overflow-tooltip="true"
        label="服务">
      </el-table-column>
      <el-table-column
        prop="value"
        header-align="center"
        align="center"
        :formatter="formatNum"
        :show-overflow-tooltip="true"
        label="有效/总数">
      </el-table-column>
    </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
    <el-table
      :data="dataList2"
      border
      style="width: 100%;">
      <el-table-column
        prop="instanceId"
        header-align="left"
        align="left"
        :show-overflow-tooltip="true"
        label="实例ID">
      </el-table-column>
      <el-table-column
        prop="hostName"
        header-align="left"
        align="left"
        width="150"
        :show-overflow-tooltip="true"
        label="HostName">
      </el-table-column>
      <el-table-column
        prop="ipAddr"
        header-align="left"
        align="left"
        width="150"
        :show-overflow-tooltip="true"
        label="IP">
      </el-table-column>
      <el-table-column
        prop="port.$"
        header-align="center"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
        label="端口号">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
        label="状态">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 'UP'" type="text" size="small" @click="shutdownService(scope.row.app, scope.row.instanceId, 'DOWN')">下线</el-button>
          <el-button v-if="scope.row.status === 'DOWN'" type="text" size="small" @click="shutdownService(scope.row.app, scope.row.instanceId, 'UP')">上线</el-button>
        </template>
      </el-table-column>
    </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataList1: [],
        dataList2: []
      }
    },
    mounted () {
    },
    activated () {
      this.getDataList1()
    },
    beforeDestroy () {
    },
    deactivated () {
    },
    methods: {
      // 折线图
      getDataList1 () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/eureka/apps'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.applications && data.applications.application) {
            this.dataList1 = data.applications.application
          } else {
            this.dataList1 = []
          }
          this.dataListLoading = false
        })
      },
      // 格式化显示部门
      formatNum (row, column) {
        var aaaa = 0
        for (var i = 0; i < row.instance.length; i++) {
          if (row.instance[i].status === 'UP') aaaa = aaaa + 1
        }
        return aaaa + '/' + row.instance.length
      },
      handleCurrentChange (val) {
        this.$http({
          url: this.$http.adornUrl(`/eureka/apps/${val.name}`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.application && data.application.instance) {
            this.dataList2 = data.application.instance
          } else {
            this.dataList2 = []
          }
          this.dataListLoading = false
        })
      },
      shutdownService (servicename, instanceid, status) {
        this.$http({
          url: this.$http.adornUrl(`/eureka/apps/${servicename}/${instanceid}/status?value=${status}`),
          method: 'PUT',
          params: this.$http.adornParams({})
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/eureka/apps/${servicename}`),
            method: 'get',
            params: this.$http.adornParams({})
          }).then(({data}) => {
            if (data && data.application && data.application.instance) {
              this.dataList2 = data.application.instance
            } else {
              this.dataList2 = []
            }
            this.dataListLoading = false
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
</style>
